<template>
  <div class="max-w-2xl mx-auto">
    <div class="text-center mb-8 pb-4 border-b border-gray-200">
      <h3 class="text-xl font-semibold text-gray-800">会员开卡</h3>
    </div>

    <el-form
      :model="memberForm"
      label-width="80px"
      class="bg-gray-50 p-6 rounded-lg mb-5"
    >
      <div class="mb-6">
        <h4
          class="flex items-center text-base font-medium text-white bg-blue-500 px-3 py-2 rounded mb-5"
        >
          会员资料
        </h4>

        <div class="space-y-5">
          <el-form-item label="类型：">
            <el-radio-group v-model="memberForm.type">
              <el-radio label="新顾客">新顾客</el-radio>
              <el-radio label="老顾客">老顾客</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="姓名：" required>
            <el-input
              v-model="memberForm.name"
              placeholder="请输入"
              class="w-80"
            />
          </el-form-item>

          <el-form-item label="手机号：">
            <el-input
              v-model="memberForm.phone"
              placeholder="请输入"
              class="w-80"
            />
          </el-form-item>

          <el-form-item label="性别：">
            <el-radio-group v-model="memberForm.gender">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="生日：">
            <div class="flex items-center gap-3">
              <el-select v-model="memberForm.birthType" class="w-20">
                <el-option label="公历" value="公历" />
                <el-option label="农历" value="农历" />
              </el-select>
              <el-date-picker
                v-model="memberForm.birthday"
                type="date"
                placeholder="请选择日期"
                class="flex-1"
              />
            </div>
          </el-form-item>

          <div class="mb-5">
            <el-button type="text" @click="showMoreInfo = !showMoreInfo">
              {{ showMoreInfo ? "收起资料" : "更多资料" }}
              <el-icon><ArrowDown /></el-icon>
            </el-button>
          </div>

          <div
            v-show="showMoreInfo"
            class="border-t border-dashed border-gray-300 pt-5 space-y-5"
          >
            <el-form-item label="身份证：">
              <el-input
                v-model="memberForm.idCard"
                placeholder="请输入身份证号"
                class="w-80"
              />
            </el-form-item>

            <el-form-item label="地址：">
              <el-input
                v-model="memberForm.address"
                placeholder="请输入地址"
                class="w-80"
              />
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>

    <div class="text-center py-5">
      <el-button class="mx-3 px-8 py-2">取消</el-button>
      <el-button type="primary" class="mx-3 px-8 py-2">下一步</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import ArrowDown from "~icons/ep/arrow-down";

// 会员开卡表单
const memberForm = ref({
  type: "新顾客",
  name: "",
  phone: "",
  gender: "男",
  birthType: "公历",
  birthday: "",
  idCard: "",
  address: ""
});

const showMoreInfo = ref(false);
</script>
